<template>
  <div class="cart">
    <!-- 渲染购物车商品 -->
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <!-- 商品卡片 -->
      <van-card
        class="goods-card"
        :price="prod.price | money"
        :title="prod.title"
      >
        <!-- 自定义缩略图，添加复选框 -->
        <template #thumb>
          <van-checkbox
            checked-color="#ee0a24"
            icon-size="16"
            :style="{marginRight: '6px'}"
            :value="prod.checked"
            @click="handleModifyChecked(prod.id)"
          ></van-checkbox>
          <div
            class="van-image"
            style="width: 75%; height: 100%;">
            <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
        <!-- 自定义数量插槽，添加步进器使用 -->
        <template #num>
          <van-stepper
            :value="prod.amount"
            theme="round"
            button-size="16"
            @change="handleChangeAmount($event, prod.id)"
          />
        </template>
      </van-card>
      <!-- 自定义滑动单元格右侧插槽内部的按钮 -->
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="handleRemove(prod.id)"
        />
      </template>
    </van-swipe-cell>

    <!-- 空状态提示 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车空空如也"
      v-if="cart.length === 0"
    />

    <!-- 提交订单栏 -->
    <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="$router.push('/order')">
      <van-checkbox
        :value="allChecked"
        @click="checkedAll({checked: !allChecked})"
        checked-color="#ee0a24"
      >全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>

</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters('cart', ['allChecked', 'totalMoney']),
    // allChecked() {
    //   return this.$store.getters['cart/allChecked']
    // },
    // totalMoney() {
    //   return this.$store.getters['cart/totalMoney']
    // },
    /**
     * 购物车数组，是对 store 中 store.state.cart.list 的引用
     */
    cart() {
      return this.$store.state.cart.list
    },
  },
  created() {
    console.log('购物车：', this.$store)
    console.log('cart', this.$store.state.cart.list)
  },
  methods: {
    ...mapMutations('cart', ['modifyChecked', 'checkedAll']), // 将 store.commit('cart/modifyChecked') 映射到 methods 方法中
    // 处理删除购物车商品
    handleRemove(id) {
      this.$store.commit('cart/removeFromCart', { id })
    },
    // 处理修改购物车商品数量
    handleChangeAmount(amount, id) {
      console.log(amount)
      this.$store.commit('cart/modifyAmount', { id, amount })
      console.log('cart', this.$store.state.cart.list)
    },
    // 处理商品行前复选框选中状态
    handleModifyChecked(id) {
      this.modifyChecked({ id })
    },
    // // 全选复选框点击事件
    // handleCheckAll() {
    //   this.checkedAll({ checked: !this.allChecked })
    // },
  },
}
</script>

<style lang="less" scoped>
.cart {
  padding-bottom: 168px;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

/deep/ .van-card__thumb {
  display: flex;
  width: 120px;
}
/deep/ .van-checkbox {
  margin-right: 6px;
}
</style>
